<template>
  <div class="homeDetail">
    <div class="tabr-nav-title">
      <van-nav-bar
        title="确认到场"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="formList">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="state.fromData.arrivalTime"
            readonly
            :disabled="true"
            name="arrivalTime"
            label="到场时间"
            placeholder="请选择"
          />
          <!--  @click="showPicker = true" -->
          <van-popup
            v-model:show="showPicker"
            destroy-on-close
            position="bottom"
          >
            <van-picker-group
              title="到场时间"
              :tabs="['选择日期', '选择时间']"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            >
              <van-date-picker
                v-model="currentDate"
                :min-date="minDate"
                :max-date="maxDate"
              />
              <van-time-picker v-model="currentTime" />
            </van-picker-group>
          </van-popup>
          <div class="uploadButton">
            <van-uploader
              v-model="fileList"
              :before-read="beforeRead"
              :after-read="afterRead"
            >
              <van-button type="primary" size="small"
                >上传拍摄到场照片</van-button
              >
            </van-uploader>
          </div>
        </van-cell-group>
      </van-form>
    </div>
    <div class="detailFoot">
      <van-button
        style="flex: 1"
        type="primary"
        size="small"
        @click="submitClick"
        >确认到场</van-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { DatePicker } from "vant";
import { confirmAttendance, upload } from "@/api/index.js";
import { showFailToast, showSuccessToast } from "vant";
const router = useRouter();
const route = useRoute();
const showPicker = ref(false);
const currentDate = ref(["2022", "06", "01"]);
const currentTime = ref(["12", "00"]);
const minDate = new Date(2020, 1, 1);
const maxDate = new Date(2030, 12, 31);
const fileList = ref([]);
const state = reactive({
  fromData: {},
});
const onConfirm = async () => {
  state.fromData.arrivalTime =
    currentDate.value.join("/") + " " + currentTime.value.join(":");
  showPicker.value = false;
};
// 返回布尔值
const beforeRead = (file) => {
  if (file.type !== "image/jpeg" && file.type !== "image/png") {
    showToast("请上传 jpg/png 格式图片");
    return false;
  }
  if (fileList.value.length >= 1) {
    fileList.value.shift();
  }
  return true;
};

// 上传
const afterRead = (file) => {
  const formData = new FormData();
  formData.append("file", file.file);
  file.status = "uploading";
  file.message = "上传中...";
  upload(formData).then((res) => {
    if (res.data.code === 200 && res.data.data) {
      state.fromData.fileId = res.data.data.id;
      file.status = "done";
    }
  });
};
const submitClick = async () => {
  if (state.fromData.fileId) {
    let id = route.query.id;
    let params = {
      id: id,
      fileId: state.fromData.fileId,
    };
    await confirmAttendance(params).then((res) => {
      showSuccessToast("到场成功");
      history.back();
    });
  } else {
    showFailToast("请上传照片");
  }
};
const onClickLeft = () => history.back();
onMounted(() => {
  const now = new Date();
  const year = now.getFullYear(); // 年
  const month = now.getMonth() + 1; // 月，注意月份从0开始，所以需要+1
  const date = now.getDate(); // 日
  const hours = now.getHours(); // 小时
  const minutes = now.getMinutes(); // 分钟
  const seconds = now.getSeconds(); // 秒
  state.fromData.arrivalTime = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
});
</script>

<style scoped lang="less">
.homeDetail {
  height: 100vh;
  background: #f7f8f7;
}

.homeHeader {
  padding: 10px;
  background: #fff;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

.tabr-nav-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 44px;
  font-size: 18px;
  color: #29292c;
  text-align: center;
  font-style: normal;
  background: #fff;
  width: 100vw;
}
.formList {
  margin: 10px 0;
  background: #fff;
  .uploadButton {
    padding: 10px;
    box-sizing: border-box;
    :deep(.van-uploader) {
      width: 100%;
      .van-uploader__input-wrapper {
        width: 100%;
        .van-button {
          width: 100%;
        }
      }
    }
  }
}
.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
</style>
